<template>
  <div id="toolBar" class="full">
    <el-space size="large">
      <el-tooltip content="添加表情" effect="light" placement="top"
        ><span>
          <el-popover :width="300" placement="top" trigger="click">
            <template #reference>
              <i class="icon-smile el-icon"></i>
            </template>
            <el-scrollbar max-height="200">
              <el-text>全部表情</el-text>
              <el-row>
                <template v-for="item in emoji" :key="item.name">
                  <el-col v-for="em in item.list" :key="em.codes" :span="4">
                    <el-text
                      size="large"
                      style="font-size: 20px; margin: 0 auto"
                      @click="addEmoji(em)"
                    >
                      {{ em.char }}
                    </el-text>
                  </el-col>
                </template>
              </el-row>
            </el-scrollbar>
          </el-popover>
        </span>
      </el-tooltip>
      <el-upload
        ref="upload"
        :before-upload="handleBeforeUpload"
        :limit="1"
        :on-exceed="handleExceed"
        :on-success="handleSuccess"
        :show-file-list="false"
        accept="image/*"
        action="http://localhost:8081/ali/uploadImage"
        name="uploadImage"
      >
        <el-tooltip content="发送图片" effect="light" placement="top">
          <span class="icon-tupiantianjia el-icon"> </span>
        </el-tooltip>
      </el-upload>
    </el-space>
  </div>
</template>
<script lang="ts" setup>
import { emoji } from "@/assets/data/emoji";

import { defineEmits, ref } from "vue";
import {
  ElMessage,
  genFileId,
  UploadInstance,
  UploadProps,
  UploadRawFile,
} from "element-plus";

const emit = defineEmits(["select:emoji", "upload:picture"]);

function addEmoji(em: any) {
  emit("select:emoji", em.char);
}

const upload = ref<UploadInstance>();
const handleExceed: UploadProps["onExceed"] = (files) => {
  console.log("触发了");
  upload.value?.clearFiles();
  const file = files[0] as UploadRawFile;
  file.uid = genFileId();
  upload.value?.handleStart(file);
  //提交
  upload.value?.submit();
};
const handleBeforeUpload: UploadProps["beforeUpload"] = (
  rawFile: UploadRawFile
) => {
  //类型及大小校验
  if (!rawFile.type.startsWith("image/")) {
    ElMessage.warning(`需要上传的文件类型必须是图片类型!`);
    return false;
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error(`图片大小不能超过2MB!`);
    return false;
  }
  return true;
};
const handleSuccess: UploadProps["onSuccess"] = (response) => {
  //上传图片
  emit("upload:picture", response.data);
  console.log(response.data);
};
</script>

<style scoped>
#toolBar {
  padding-top: 10px;
  padding-left: 10px;
  font-size: 20px !important;
}

.el-text.el-text--large:hover {
  background-color: #f2f2f2;
}
</style>
